﻿<!DOCTYPE html>
<!-- saved from url=(0048)http://localhost:63342/text/page/directive3.html -->
<html>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
        @charset "UTF-8";

        [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide {
            display: none !important;
        }

        ng\:form {
            display: block;
        }

        .ng-animate-start {
            clip: rect(0,auto,auto,0);
            -ms-zoom: 1.0001;
        }

        .ng-animate-active {
            clip: rect(-1px,auto,auto,0);
            -ms-zoom: 1;
        }
    </style>
    <meta charset="UTF-8">
    <title></title>
    <script src="../Resource/JS/angular.1.2.0.min.js"></script>
    <style>
        .expan {
            border: 1px solid black;
            width: 250px;
        }

            .expan > .title {
                background-color: black;
                color: white;
                padding: .1em .3em;
                cursor: pointer;
            }

            .expan > .body {
                padding: .1em .3em;
            }
    </style>
</head>
<body ng-app="myApp">
    <!--这里面的title和text是这个expan的属性,以便scope里面访问的-->
    <expan class="expan" title="abc" text="aaaaa">
    </expan>
</body>
</html>
<script>
    var app = angular.module("myApp", []);
    app.directive("expan", function () {
        return {
            restrict: "EA",
            replace: true,
            //transclude这个属性我不知道是干啥的  我得找找
            transclude: true,
            //这里的scope是这个directive的scope，他里面可以定义一些属性，这里定义的属性必须和<expan>标签里面的属性对应起来
            //用@的时候是字符串处理，用=的时候是对象处理
            scope: {
                title: "@",
                text: "@",
            },
            //{{title}}和{{text}}是scope里面的属性，你在scope里面定义了，所以这里可以直接使用
            //{{title}}和{{text}}的寻找顺序，先找scope里面定义的，如果找不到，那么在找controller的，先找到谁的就用谁的
            template: "<div>" + "<div class='title' ng-click='toggle()'>{{title}}</div>" + "<div class='body' ng-show='showMe'>{{text}}</div></div>",//这里我去掉了ng-transclude
            link: function (scope, element, attrs) {
                scope.showMe = false;
                scope.toggle = function () {
                    scope.showMe = !scope.showMe;
                    //我在这里也可以使用scope的text属性，因为我在上面定义了这个属性
                    scope.text = "abcq";
                }
            },
            //这个controller是属于这个directive的，如果<expan class="expan" title="abc" text="aaaaa">没有写title和text，那么在这里定义title和text也是可以的，
            controller: function ($scope) {
                var s = $scope.title;
                alert(s);
                //这里是可以访问到的，说明在scope: {}里面定义的生效了，一般情况写directive，都会在scope里面定义好，而不是在controller里面声明
                $scope.title = "点击展开";
                $scope.text = "ssss";
            }
        }
    })
</script>
